<template>
  <div>
    <Header title="找回密码"><i class="el-icon-arrow-left" @click="$global.goPage('/login')"></i></Header>
    <el-container>
      <el-form :model="FindpassForm" :rules="FindpassRules" ref="FindpassFormRef">
        <el-form-item prop="username" >
          <el-input placeholder="请输入用户名" v-model="FindpassForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="FindpassForm.email" placeholder="邮箱" prefix-icon="el-icon-chat-line-square"></el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="FindpassForm.mobile" placeholder="手机号" prefix-icon="el-icon-mobile"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input placeholder="请输入新密码" v-model="FindpassForm.password" prefix-icon="iconfont icon-lock_fill" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input placeholder="再次输入新密码" type="password" v-model="FindpassForm.checkPass" prefix-icon="iconfont icon-lock_fill" show-password></el-input>
        </el-form-item>
        <el-button type="primary" @click="findpass">找回密码</el-button>
      </el-form>
    </el-container>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../../components/Header";
import {mapState} from "vuex";
    export default {
        name: "findPassword",
      data(){
        return{
          FindpassForm:{username:'',
            password:'',
            checkPass:'',email:'',mobile:''}
        }
      },
      components:{Header},
      computed:{...mapState({FindpassRules: state=>state.UserRules,})},
      created() {
        this.$store.commit('checkpass',this.FindpassForm)
      },
      methods:{
        findpass(){
          this.$refs.FindpassFormRef.validate( async (valid) => {
            if (valid) {
              const res = await this.$http.post('api/user/index',this.FindpassForm)
              if (res.data.status === 200) {
                const edit = await this.$http.put('api/user/edit?id='+res.data.data.id, {password:this.FindpassForm.password})
                if(edit.data.status!==200){this.$message.error(res.data.msg)}
                this.$message.success('修改密码成功')
                this.$router.push("./login")
                  this.reset()
              }else{
                return this.$message.error(res.data.msg)
              }
            } else {
              return this.$message.error('请填写完整的用户信息')
            }
          })
        },
        reset(){
          this.$refs.FindpassFormRef.resetFields();
        }
      }
    }
</script>

<style scoped>

</style>
